<template>
  <div id="app">
    <nav-bar title="消息列表" left-arrow @clickLeft="back" />
    <van-tabs v-model="activeTab" sticky @click="chageTab">
      <van-tab
        v-for="(tab, index) in msgTags"
        :key="index"
        :title="tab.name"
      >
      </van-tab>
    </van-tabs>
    <div class="pd-all">
      <msg-list :type="type" />
    </div>

    <slogan/>
  </div>
</template>

<script>
	import { 
    Tab, 
    Tabs
  } from "vant";
  import MsgList from "../components/msg-list"
  import NavBar from "@cmpt/header/navbar"
  import { MSG_LIST_TABS } from '@utils/default_config';
  import Slogan from '@cmpt/slogan'

  	import { getRole } from '@utils/role'

  export default {
    name: "App",
    components:{
      [MsgList.name]: MsgList,
      [NavBar.name]: NavBar,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
      [Slogan.name]: Slogan,
    },
    data(){
        return {
          type: this.$getUrlParam('type') || 0,
          activeTab: 0,
          loading: false,
          allTabs: MSG_LIST_TABS,
          msgTags: [],
          role: getRole()
        }
    },
    created() {
      if(this.role === '0'){
        this.allTabs.splice(this.allTabs.findIndex(item => item.key === 3), 1)
      }
      this.msgTag = [...this.allTabs]
      const url_type = this.$getUrlParam('type') || null
      if(url_type){
        this.activeTab = this.msgTags.findIndex(item => item.key = Number(url_type))
      }
    },
    methods:{
      back () {
        this.$goPageBack('message')
      },
      chageTab(index) {
        this.activeTab = index
        const item = this.msgTags[index]
        this.type = item.key
        this.$mergePageParams({
          type: this.type
        })
      }
    }
  }
</script>

<style lang="less" scoped>
@import "~@style_m/basic/utils/index";
@import "~@style_m/components/body-bg";
  .oval-header {
    min-height: 50px;
    &:after {
      background-size: 100% 100px;
    }
  }
  .msg-head-tags {
    margin: 20px 0 12px;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    a {
      display: block;
      padding: 15px 0;
    }
    p{
      color: @black;
      margin-top: 10px;
    }
    img {
      max-height: 24px;
      width: auto;
    }
  }
</style>
